<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <div style="width:100%;height: 1000px;background:white;">
          <div class="all-box">
            <div class="left-box">
              <div class="l-b-f">
                <div class="mx">母线</div>
                <div class="fdzgl">总发电功率</div>
              </div>
              <div class="blue-line"></div>
              <img
                      src="../../../../assets/img/cdxt/zxmain.png"
                      alt=""
                      class="zxmiana"
              />
              <img src="../../../../assets/img/cdxt/dlq.png" alt="" class="dlqa"/>
              <div class="infoa">
                <span style="color:#999999">实时电流</span><br/>
                <span style="color:#369afe"
                >{{ chargingInfoA.chargingpileI | noDataFormat }}A</span
                >
              </div>
              <img src="../../../../assets/img/cdxt/blq.png" alt="" class="blqa"/>
              <div class="infob">
                <span>【变流器信息】</span><br/>
                <div style="padding-left:6px">
                  <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                  <span
                  >电流:
              <span style="color:#369afe"
              >{{ chargingInfoA.converterI | noDataFormat }}A</span
              > </span
                  ><br/>
                  <span
                  >电压:
              <span style="color:#369afe"
              >{{ chargingInfoA.converterU | noDataFormat }}V</span
              > </span
                  ><br/>W
                  <span
                  >功率:
              <span style="color:#369afe">{{ chargingInfoA.converterP }}W</span>
            </span>
                </div>
              </div>
              <div class="infoc">
                <span>【充电桩信息】</span><br/>
                <div style="padding-left:6px">
                  <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                  <span
                  >电流:
              <span style="color:#369afe"
              >{{ chargingInfoA.chargingpileI | noDataFormat }}A</span
              > </span
                  ><br/>
                  <span
                  >电压:
              <span style="color:#369afe"
              >{{ chargingInfoA.chargingpileU | noDataFormat }}V</span
              > </span
                  ><br/>W
                  <span
                  >功率:
              <span style="color:#369afe"
              >{{ chargingInfoA.chargingpileP | noDataFormat }}W</span
              >
            </span>
                </div>
              </div>
              <img
                      src="../../../../assets/img/cdxt/zxleft.png"
                      alt=""
                      class="zxleft"
              />
              <div class="infod">
                <div class="moren" :class="Azt == 1 ? 'fadian' : ''">发电</div>
                <div class="moren" :class="Azt == 2 ? 'tingyun' : ''">停运</div>
                <div class="moren" :class="Azt == 3 ? 'guzhang' : ''">故障</div>
              </div>
              <img
                      src="../../../../assets/img/cdxt/zxmain-c.png"
                      alt=""
                      class="zxmianb"
              />
              <div class="infoe">
                <span>【变流器信息】</span><br/>
                <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                <span
                >电流:
            <span style="color:#369afe"
            >{{ chargingInfoB.converterI | noDataFormat }}A</span
            > </span
                ><br/>
                <span
                >电压:
            <span style="color:#369afe"
            >{{ chargingInfoB.converterU | noDataFormat }}V</span
            > </span
                ><br/>W
                <span
                >功率:
            <span style="color:#369afe"
            >{{ chargingInfoB.converterP | noDataFormat }}W</span
            >
          </span>
              </div>
              <div class="infof">
                <span>【充电桩信息】</span><br/>
                <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                <span
                >电流:
            <span style="color:#369afe"
            >{{ chargingInfoB.chargingpileI | noDataFormat }}A</span
            > </span
                ><br/>
                <span
                >电压:
            <span style="color:#369afe"
            >{{ chargingInfoB.chargingpileU | noDataFormat }}V</span
            > </span
                ><br/>W
                <span
                >功率:
            <span style="color:#369afe"
            >{{ chargingInfoB.chargingpileP | noDataFormat }}W</span
            >
          </span>
              </div>
              <div class="infog">
                <div class="moren" :class="Bzt == 1 ? 'fadian' : ''">发电</div>
                <div class="moren" :class="Bzt == 2 ? 'tingyun' : ''">停运</div>
                <div class="moren" :class="Bzt == 3 ? 'guzhang' : ''">故障</div>
              </div>
              <img
                      src="../../../../assets/img/cdxt/zxright.png"
                      alt=""
                      class="zxright"
              />
              <img
                      src="../../../../assets/img/cdxt/zxmain-c.png"
                      alt=""
                      class="zxmainbc"
              />
              <img
                      src="../../../../assets/img/cdxt/zxmain.png"
                      alt=""
                      class="zxmainc"
              />
              <img src="../../../../assets/img/cdxt/dlq.png" alt="" class="dlqb"/>
              <img src="../../../../assets/img/cdxt/blq.png" alt="" class="blqb"/>
              <div class="infoh">
                <span style="color:#999999">实时电流</span><br/>
                <span style="color:#369afe"
                >{{ chargingInfoC.chargingpileI | noDataFormat }}A</span
                >
              </div>
              <div class="infoi">
                <span>【变流器信息】</span><br/>
                <div style="padding-left:6px;">
                  <span> 状态: <span style="color:#369afe">运行</span> </span><br/>
                  <span
                  >电流:
              <span style="color:#369afe"
              >{{ chargingInfoC.converterP | noDataFormat }}A</span
              > </span
                  ><br/>
                  <span
                  >电压:
              <span style="color:#369afe"
              >{{ chargingInfoC.converterP | noDataFormat }}V</span
              > </span
                  ><br/>W
                  <span
                  >功率:
              <span style="color:#369afe"
              >{{ chargingInfoC.converterP | noDataFormat }}W</span
              >
            </span>
                </div>
              </div>
              <div class="infoj">
                <span>【充电桩信息】</span><br/>
                <div>
                  <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                  <span
                  >电流:
              <span style="color:#369afe"
              >{{ chargingInfoC.chargingpileI | noDataFormat }}A</span
              > </span
                  ><br/>
                  <span
                  >电压:
              <span style="color:#369afe"
              >{{ chargingInfoC.chargingpileU | noDataFormat }}V</span
              > </span
                  ><br/>W
                  <span
                  >功率:
              <span style="color:#369afe"
              >{{ chargingInfoC.chargingpileP | noDataFormat }}W</span
              >
            </span>
                </div>
              </div>
              <div class="infok">
                <div class="moren" :class="Czt == 1 ? 'fadian' : ''">发电</div>
                <div class="moren" :class="Czt == 2 ? 'tingyun' : ''">停运</div>
                <div class="moren" :class="Czt == 3 ? 'guzhang' : ''">故障</div>
              </div>
              <div class="infol">
                <span>【变流器信息】</span><br/>
                <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                <span
                >电流:
            <span style="color:#369afe"
            >{{ chargingInfoD.converterP | noDataFormat }}A</span
            > </span
                ><br/>
                <span
                >电压:
            <span style="color:#369afe"
            >{{ chargingInfoD.converterP | noDataFormat }}V</span
            > </span
                ><br/>W
                <span
                >功率:
            <span style="color:#369afe"
            >{{ chargingInfoD.converterP | noDataFormat }}W</span
            >
          </span>
              </div>
              <div class="infom">
                <span>【充电桩信息】</span><br/>
                <span>状态: <span style="color:#369afe">运行</span> </span><br/>
                <span
                >电流:
            <span style="color:#369afe"
            >{{ chargingInfoD.chargingpileI | noDataFormat }}A</span
            > </span
                ><br/>
                <span
                >电压:
            <span style="color:#369afe"
            >{{ chargingInfoD.chargingpileU | noDataFormat }}V</span
            > </span
                ><br/>W
                <span
                >功率:
            <span style="color:#369afe"
            >{{ chargingInfoD.chargingpileP | noDataFormat }}W</span
            >
          </span>
              </div>
              <div class="infon">
                <div class="moren" :class="Dzt == 1 ? 'fadian' : ''">发电</div>
                <div class="moren" :class="Dzt == 2 ? 'tingyun' : ''">停运</div>
                <div class="moren" :class="Dzt == 3 ? 'guzhang' : ''">故障</div>
              </div>
            </div>
            <div class="right-box">
              <div class="r-b-f">
                <div class="container-title">
                  <div class="icon"></div>
                  充电系统信息总览
                </div>
              </div>
              <div class="r-b-s">
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/1.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>充电桩总数(个)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.chargingPileNum | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/2.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>充电电量(千瓦时)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.chargingvolume | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/3.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>今日充电量(千瓦时)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.todayChargingvolume | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/4.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>今日充电次数(次)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.todayChargingtimes | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/5.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>实时充电功率(瓦)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.realChargingP | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/6.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>累计充电电量(千瓦时)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.sumChargingvolume | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/7.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>安全运营天数(天)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.safeDays | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/8.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>累计充电次数(次)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.sumChargingtimes | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/9.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>功率可调裕度(千瓦)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.powerAdjustableMargin | noDataFormat }}
                    </div>
                  </div>
                </div>
                <div class="r-s-item">
                  <img
                          src="../../../../assets/img/cdxt/10.png"
                          alt=""
                          style="width:60px;height:60px"
                  />
                  <div class="r-s-item-r">
                    <div>充电费用(元)</div>
                    <div style="font-weight:bold">
                      {{ this.sumSystemInfo.chargingCost | noDataFormat }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="r-b-f" style="margin-top:45px">
                <div class="container-title">
                  <div class="icon"></div>
                  充电桩冲放电功率曲线图
                </div>
              </div>
              <div class="chart">
                <charge></charge>
              </div>
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>
<script>
import charge from "../../../../components/echarts/chargingcharts";
import {
    chargingInfo,
    getPowerDay,
    sumSystemInfo
} from "../../../../api/scada.js";

export default {
    components: {
        charge
    },
    data() {
        return {
            sumSystemInfo: {},
            chargingInfoA: "",
            Azt: "",
            chargingInfoB: "",
            Bzt: "",
            chargingInfoC: "",
            Czt: "",
            chargingInfoD: "",
            Dzt: "",
            date: ""
        };
    },
    mounted() {
        sumSystemInfo().then((res) => {
            this.sumSystemInfo = res.result || {};
            console.log(res);
        });
        chargingInfo().then((res) => {
            this.chargingInfoA = res.result[0] || {};
            this.Azt = this.chargingInfoA.charginggunStatus;
            this.chargingInfoB = res.result[1] || {};
            this.Bzt = this.chargingInfoB.charginggunStatus;
            this.chargingInfoC = res.result[2] || {};
            this.Czt = this.chargingInfoC.charginggunStatus;
            this.chargingInfoD = res.result[3] || {};
            this.Dzt = this.chargingInfoC.charginggunStatus;
            console.log(this.Azt);
        });
    },
    methods: {}
};
</script>

<style scoped lang="scss">
  .container-title {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .icon {
      margin-right: 10px;
      width: 4px;
      height: 16px;
      background-color: #0893fd;
    }
  }

  .chart {
    width: 100%;
    height: 28%;
    margin-top: 2%;
    position: relative;
  }

  .data {
    position: absolute;
    right: 0;
    top: -30px;
  }

  .r-b-four > div {
    display: flex;
    font-size: 18px;
    align-items: center;
    width: 44%;
    justify-content: center;
    margin-top: 24px;
  }

  .r-b-four {
    display: flex;

    justify-content: space-between;
    flex-wrap: wrap;
  }

  .r-b-s {
    display: flex;
    flex-wrap: wrap;
  }

  .r-s-item-r {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;

    height: 100%;
  }

  .r-s-item {
    width: 46%;
    height: 60px;
    display: flex;
    margin-top: 25px;
    align-items: center;
  }

  .r-s-item:nth-child(2n) {
    margin-left: 20px;
  }

  .r-b-f {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-top: 20px;
  }

  .r-line {
    width: 4px;
    height: 16px;
    background: #6563ff;
    margin-right: 20px;
  }

  .infon > div {
    width: 48px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }

  .infon {
    position: absolute;
    top: 90%;
    left: 73%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .infom {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    color: #999999;
    top: 73%;
    left: 82%;
  }

  .infol {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    color: #999999;
    top: 70%;
    left: 65%;
  }

  .infok > div {
    width: 48px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }

  .infok {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 50%;
    left: 73%;
  }

  .infoj {
    position: absolute;
    left: 81%;
    top: 32.5%;
    color: #999999;
  }

  .infoi {
    position: absolute;
    left: 64%;
    top: 29.5%;
    color: #999999;
  }

  .infoh {
    position: absolute;
    left: 69%;
    top: 17%;
    text-align: right;
  }

  .zxmainc {
    position: absolute;
    right: 18%;
    height: 43%;
  }

  .dlqb,
  .blqb,
  .dlqa,
  .blqa {
    position: absolute;
    height: 28px;
    left: 65%;
    top: 14%;
  }

  .blqb,
  .blqa {
    top: 22%;
  }

  .dlqa,
  .blqa {
    left: 10%;
  }

  .zxmianb {
    height: 28%;
    position: absolute;
    left: 18.5%;
    top: 61%;
  }

  .zxmainbc {
    /* right: -65%; */
    height: 28%;
    position: absolute;
    right: 16%;
    top: 61%;
  }

  .zxright {
    position: absolute;
    right: 20%;
    height: 55%;
  }

  .infog > div {
    width: 48px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }

  .infog {
    position: absolute;
    left: 14%;
    top: 91%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .infof {
    position: absolute;
    left: 23%;
    top: 73%;
    color: #999999;
  }

  .infoe {
    position: absolute;
    left: 7%;
    top: 71%;
    color: #999999;
  }

  .infod > div {
    width: 48px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }

  .infod {
    position: absolute;
    display: flex;
    left: 15%;
    top: 50%;
  }

  .zxleft {
    position: absolute;
    left: 21%;
    height: 55%;
  }

  .infoc {
    position: absolute;
    color: #999999;
    left: 26%;
    text-align: left;
    top: 32%;
    font-size: 16px;
  }

  .infob {
    position: absolute;
    color: #999999;
    left: 8%;
    text-align: left;
    top: 29%;
    font-size: 16px;
  }

  .infoa {
    position: absolute;
    left: 13%;
    text-align: right;
    top: 17%;
  }

  .l-b-f {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    .fdzgl {
      display: inline-block;
      color: #999999;
      font-size: 14px;
    }
    .mx {
      display: inline-block;
      color: #333333;
      font-size: 16px;
      margin-right: 20px;
      left: 35%;
    }
  }

  .blue-line {
    margin-left: 20px;
    width: 89%;
    background: #369afe;
    height: 10px;
  }

  .zxmiana {
    position: absolute;
    left: 20%;
    height: 43%;
  }

  .left-box {
    width: 60%;
    height: 100%;
    position: relative;
  }

  .right-box {
    width: 38%;
    height: 100%;
    position: relative;
    display: flex;
    flex-flow: column;
    padding-right: 20px;
  }

  .all-box {
    width: 100%;
    height: 100%;
    float: right;
    /* margin-right: 30px; */

    /* margin-top: 45px; */
    display: flex;
    justify-content: space-between;
  }

  .moren {
    background: #e2e2e2;
  }

  .guzhang {
    background: #fe9834;
    color: #ffffff;
  }

  .tingyun {
    background: #fc7f7d;
    color: #ffffff;
  }

  .fadian {
    background: #90d66d;
    color: #ffffff;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
  }
</style>
